<template>
  <div id="registeredUserFrom" class="mainContent">
    <div class="form-horizontal" v-if="isShow">
      <div class="row form-group">
        <label class="control-label col-xs-2" for="AddUserName"><span style="color:red;">*</span>用户名:</label>
        <div class="col-xs-4">
          <input class="form-control" @change="changeUserName" id="AddUserName" v-model.trim="AddUserName" type="text" v-bind:disabled ="isUserName" placeholder="请输入用户名" onkeyup="this.value=this.value.replace(/\s+/g,'')">
        </div>
        <div class="col-xs-4 control-label" style="text-align:left"><span :class="{success:activeUserName,error:!activeUserName}">{{msgUserName}}</span></div>
      </div>
      <div class="row form-group" v-if="isShowPwd">
        <label class="control-label col-xs-2" for="NewPassword"><span style="color:red;">*</span>密码:</label>
        <div class="col-xs-4">
          <input class="form-control" @blur="changePwd" autocomplete="new-password" id="NewPassword" placeholder="请输入密码" v-model.trim="NewPassword" type="password" onkeyup="this.value=this.value.replace(/\s+/g,'')" maxlength="16">
        </div>
        <div class="col-xs-4 control-label" style="text-align:left"><span :class="{success:activePwd,error:!activePwd}">{{msgPassword}}</span></div>
      </div>
      <div class="row form-group" v-if="isShowPwd">
        <label class="control-label col-xs-2" for="twoPassword"><span style="color:red;">*</span>重复密码:</label>
        <div class="col-xs-4">
          <input class="form-control" @blur="changeTwoPwd" id="twoPassword" v-model.trim="twoPassword" type="password" placeholder="请再次输入密码" onkeyup="this.value=this.value.replace(/\s+/g,'')" maxlength="16">
        </div>
        <div class="col-xs-4 control-label" style="text-align:left"><span :class="{success:activeTwoPwd,error:!activeTwoPwd}"> {{msgTwoPassword}}</span></div>
      </div>
      <div class="row form-group">
        <label class="control-label col-xs-2"><span style="color:red;">*</span>到期时间:</label>
        <div class="col-xs-4">
          <vue-datepicker-local v-model="emptyTime" clearable style="width:100%;" />
        </div>
        <div class="col-xs-4 control-label" style="text-align:left"><span :class="{success:activeTime,error:!activeTime}"> {{msgTime}}</span> </div>
      </div>
      <div class="row form-group">
        <label class="control-label col-xs-2"><span style="color:red;">*</span>所在科室:</label>
        <div class="col-xs-4">
          <div class="select" v-clickoutside="handleClose">
            <p :class="{'up' : isShowSection}" @click="showSection">{{section}}</p>
            <ul :class="['link-list',{'show': isShowSection}]">
              <li v-for="(item,index) in tab" :data-id="item.value"
                  @click="changeSection($event)">
                {{item.label}}
              </li>
            </ul>
          </div>
        </div>
        <div class="col-xs-4 control-label" style="text-align:left"></div>
      </div>
      <div class="row form-group">
        <label class="control-label col-xs-2" for="Position">职 称:</label>
        <div class="col-xs-4">
          <input class="form-control"  id="Position" v-model.trim="Position" type="text" placeholder="请输入职称" onkeyup="this.value=this.value.replace(/\s+/g,'')">
        </div>
      </div>
      <div class="form-group" style="margin-top:40px;">
        <div class="col-sm-offset-2 col-xs-2">
          <button class="btn btn-success  btn-block" @click="submit">确认</button>
        </div>
        <div class="col-xs-2">
          <button class="btn btn-default btn-block " @click="clear">取消</button>
        </div>
      </div>
    </div>
    <loading v-if="!isShow"></loading>
  </div>
</template>
<script>
  import loading from '@/components/loading/loading'
  import VueDatepickerLocal from '@/components/datepicker/VueDatepickerLocal'
  import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
  import { apiAddIntern , apiGetIsRedundant ,apiGetOneIntern} from '@/api/api'
    export default {
      name: 'changepassword',
      data: function () {
        return {
          msgUserName: '',   //存储用户名报错信息
          msgPassword: '',    //存储输入密码报错信息
          msgTwoPassword: '',   //存储再次输入密码报错信息
          msgTime: '',        //存储时间报错信息
          AddUserName: '',        //存储输入用户名
          NewPassword: '',        // 存储输入的密码
          twoPassword: '',        //存储再次输入的密码
          Position:'',               //职位
          activeUserName: false,   //标识用户名是否输入有误
          activePwd: false,        //标识密码是否输入有误
          activeTwoPwd: false,      //标识再次输入密码是否和前面的密码一致
           activeTime:false,
          isShowSection:false,      // 标识下拉框是否出现
          isShowPwd: false,          // 是否编辑 如果 是编辑就隐藏密码输入框
          isUserName:false,        //是否编辑 如果是编辑就让用户不可编辑
           emptyTime: '',
          dateTime: '',
          tab: [
            { label: '外科楼ICU', value: 171 },
            { label: '内科楼ICU', value: 175},
            { label: '急诊科EICU', value: 194 }
          ],
          isShow:false,
          section:'外科楼ICU',        //科室
          ID_DEP : 171               // 科室ID
        }
    },
    watch: {
      dateTime: {
        handler(curVal, oldVal) {
          //console.log(curVal)
          if(curVal == ''){
             this.activeTime = false;
             this.msgTime = '到期时间不能为空'
        }else{
             this.activeTime = true;
             //this.msgTime = '时间选择无误'
      }
        }
      },
      section: {
        handler(curVal, oldVal) {
            //console.log(curVal);
          if(curVal == '外科楼ICU'){
          this.ID_DEP = 171;
         }else if(curVal == '内科楼ICU'){
           this.ID_DEP = 175;
        }else if(curVal == '急诊科EICU'){
          this.ID_DEP = 194;
        }
        }
      }
    },
     created(){
       this.GetOneIntern();
   },
      mounted() {
        Bus.$on("timePicker", e => {
          this.dateTime = e.trim();
        });
      },
      methods: {
        GetOneIntern(){
           if(this.$route.query.status == 1){
           apiGetOneIntern({
            internId: this.$route.query.id
          })
             .then(res => {
             this.isUserName = true;
             this.isShow = true;
             this.isShowPwd =false;
             let Data = JSON.parse(res.Data)[0];
            // console.log(Data)
             this.AddUserName =  Data.Name;
             this.Position  = Data.Position;
             this.section = Data.Content;
             this.emptyTime = this.filterTime(Data.ExpirationTime);
             this.dateTime = this.filterTime(Data.ExpirationTime);
          })
         }else{
          this.isUserName = false;
            this.isShow = true;
           this.isShowPwd = true;
          }
        },
        GetIsRedundant(){
          apiGetIsRedundant({
            doctorName : this.AddUserName
           })
             .then(res => {
              //console.log(res)
            if(res.Status == 1){
                 this.activeUserName = true;
                 this.msgUserName = res.Message;
             }else if(res.Status == 0){
                 this.activeUserName = false;
                 this.msgUserName = res.Message;
              }else{
                this.activeUserName = false;
                 this.msgUserName = res.Message;
            }
         })
        },
        changeUserName: function () {
          if (this.AddUserName == "") {
            this.msgUserName = "用户名不能为空";
            this.activeUserName = false;
          }  else {
            this.GetIsRedundant();
            this.msgUserName = "正在确认中，请稍后";
            this.activeUserName = true;
          }
        },
        changePwd: function () {
          //var pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;//
          if (this.NewPassword == "") {
            this.msgPassword = "密码不能为空";
            this.activePwd = false;
          } else {
            this.msgPassword = "输入密码格式正确";
            this.activePwd = true;
          }
        },
        changeTwoPwd: function () {

          if (this.twoPassword == "") {
            this.msgTwoPassword = "密码不能为空";
            this.activeTwoPwd = false;
          } else if (this.NewPassword != this.twoPassword) {
            this.msgTwoPassword = "再次输入密码须保持一致";
            this.activeTwoPwd = false;
          } else {
            this.msgTwoPassword = "再次输入密码正确";
            this.activeTwoPwd = true;
          }
        },
        submit: function () {
         if(this.$route.query.status == 0){    //当为新增时
          if (this.activeTwoPwd && this.activePwd && this.activeUserName && this.dateTime != '') {  //判断必填项都填写的情况
               let Data = {};
               Data.Name = this.AddUserName;
               Data.Pwd = this.NewPassword;
               Data.ID_DEP = this.ID_DEP;
               Data.Position = this.Position;
               Data.ExpirationTime = this.dateTime;
                //console.log(Data)
                 apiAddIntern({
                     doctor_User : JSON.stringify(Data),
                     type: 1
                 })
                 .then(res => {
                //console.log(res);
                if(res.Status == 1){
                this.$toast.center(res.Message);
                this.$router.push({
                    path:'/registeredUser/registeredUserChart' ,
                    query: { item : 4 }
                       })
               }else{
                  this.$toast.center(res.Message);
                 }
               })
          } else if (this.activeTwoPwd && this.activePwd && this.activeUserName && this.dateTime == '') {     //判断必填项里时间未选择的情况
            this.activeTime = false;
            this.msgTime = '到期时间不能为空'
            this.$toast.center('请选择到期时间！！！');
          }else {
            this.changeUserName();
            this.changePwd();
            this.changeTwoPwd();
            this.$toast.center('请正确填写数据！！！');
          }
      }else{                //当为编辑时
         if(this.dateTime != ''){
           let Data = {};
               Data.ID = this.$route.query.id;
               Data.Name = this.AddUserName;
               Data.ID_DEP = this.ID_DEP;
               Data.Position = this.Position;
               Data.ExpirationTime = this.dateTime;
                //console.log(Data)
                 apiAddIntern({
                     doctor_User : JSON.stringify(Data) ,
                     type: 2
                 })
                 .then(res => {
                //console.log(res);
                if(res.Status == 1 || res.Status == 0){
                this.$toast.center(res.Message);
                this.$router.push({
                    path:'/registeredUser/registeredUserChart' ,
                    query: { item : 4 }
                    })
               }else{
                  this.$toast.center(res.Message);
                 }
               })
          }else if(this.dateTime == ''){
            this.activeTime = false;
            this.msgTime = '到期时间不能为空'
            this.$toast.center('请选择到期时间！！！');
       }else{
           this.changeUserName();
           this.$toast.center('请正确填写数据！！！');
      }
       }
        },
        showSection() {
          this.isShowSection = !this.isShowSection;
        },
        changeSection(event) {
          this.isShowSection = false;
          if ($.trim(event.currentTarget.innerHTML) != this.section) {  // 当选择的值跟当前的值不一样时
            this.section = $.trim(event.currentTarget.innerHTML);  //赋值
            this.ID_DEP = $.trim(event.currentTarget.getAttribute("data-id"))
          }
        },
        handleClose() {
          this.isShowSection = false;
        },
        clear() {
          if(this.$route.query.status == 0){
          this.AddUserName = '';
          this.NewPassword = '';
          this.twoPassword = '';
          this.emptyTime = '';
          this.dateTime = '' ;
          this.msgTwoPassword = '';
          this.msgPassword = '';
          this.msgUserName = '';
          this.msgTime = ''
          this.activeTime = false;
          this.activeUserName = false
          this.activePwd =  false
          this.activeTwoPwd =  false
        }else{
           this.GetOneIntern();
       }
        },
       filterTime(date){
       if (!date) {
         return date;
    }
      else {
    return date.replace('T', '  ').substring(0, 10);
       }
     }

    },
    components: {
      VueDatepickerLocal,
      loading
    }
}
</script>
<style scoped>
  #registeredUserFrom {
    padding: 40px 15px 20px 20px;
  }

  .form-group {
    margin-bottom: 25px;
  }

  .btn {
    padding: 9px 12px;
  }

  .form-horizontal .control-label {
    color: #666;
    font-size: 14px;
    font-weight: 500;
  }

  .success {
    color: green;
  }

  .error {
    color: red;
  }

  .select {
    width: 100%;
    height: 34px;
    line-height: 34px;
    background: #fff;
    padding-left: 10px;
    border: 1px solid #ccc;
  }

    .select p {
      color: #555;
      position: relative;
    }

      .select p:after {
        display: inline-block;
        content: '';
        width: 10px;
        height: 10px;
        background-image: url("../../../../static/images/unfold_arron.png");
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
        margin-right: 10px;
        margin-top: 12px;
        float: right;
      }

      .select p.up:after {
        background-image: url("../../../../static/images/up_arron.png");
      }

  .link-list {
    position: relative;
    z-index: 9999;
    display: none;
    border: 1px solid #eee;
    left: -10px;
    width: 100%;
    background-color: #fff;
    box-shadow: 2px 5px 5px #ccc;
  }

    .link-list li {
      text-align: center;
      cursor: pointer;
    }

      .link-list li:hover {
        background-color: #f6f6f6;
        border-bottom: 1px solid #ccc;
      }
</style>
